<template>
  <el-row>
    <el-col v-for="o in 4"
            :key="o"
            :span="6">
      <el-card>
        <img :src="item.cover"
             class="image">
        <div style="padding: 14px;">
          <h3 class="hLh30 txtOf mt10">
            <a href="#"
               :title="item.title"
               class="course-title fsize18 c-333">{{item.title}}</a>
          </h3>
          <div class="bottom clearfix">
            <section class="mt10 hLh20 of">
              <span v-if="Number(item.price) === 0"
                    class="fr jgTag bg-green">
                <i class="c-fff fsize12 f-fA">免费</i>
              </span>
              <span v-else
                    class="fr jgTag bg-green">
                <i class="c-fff fsize12 f-fA"> ￥{{item.price}}元</i>
              </span>
              <span class="fl jgAttr c-ccc f-fA">
                <i class="c-999 f-fA">{{item.buyCount}} 人学习</i>
                |
                <i class="c-999 f-fA">{{item.viewCount}} 人浏览</i>
              </span>
            </section>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>



<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {

    };
  }
}
</script>
<style>
</style>